{% extends 'encyclopedia/base.html' %}

{% block title %}{{ accessory.title }} - 相机配件详情 - 相机百科{% endblock %}

{% block content %}
<!-- 返回按钮 -->
<div class="mb-4">
    <a href="{% url 'encyclopedia:accessory_list' %}" class="btn btn-outline-secondary rounded-lg shadow-sm flex items-center">
        <i class="fa fa-arrow-left mr-2"></i> 返回配件列表
    </a>
</div>

<!-- 配件头部信息 -->
<div class="bg-gradient-to-r from-primary to-primary/80 rounded-xl shadow-lg text-white p-6 mb-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <i class="fa fa-puzzle-piece text-3xl"></i>
                <h1 class="text-2xl md:text-3xl font-bold">{{ accessory.title }}</h1>
            </div>
            <div class="flex flex-wrap items-center gap-4">
                <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                    <i class="fa fa-building-o mr-2"></i>{{ accessory.brand }}
                </span>
                <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                    <i class="fa fa-th-large mr-2"></i>
                    <a href="{% url 'encyclopedia:accessory_category_detail' accessory.category.pk %}" class="text-white hover:text-secondary transition-colors">
                        {{ accessory.category.name }}
                    </a>
                </span>
                {% if accessory.price_range %}
                <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                    <i class="fa fa-yen mr-2"></i>{{ accessory.price_range }}
                </span>
                {% endif %}
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex gap-3">
            <a href="{% url 'encyclopedia:accessory_edit' accessory.pk %}" class="btn btn-white text-primary hover:bg-gray-100 rounded-lg shadow-sm">
                <i class="fa fa-pencil mr-2"></i> 编辑
            </a>
            <button type="button" class="btn btn-outline-white hover:bg-white/10 rounded-lg shadow-sm" data-bs-toggle="modal" data-bs-target="#deleteModal">
                <i class="fa fa-trash mr-2"></i> 删除
            </button>
        </div>
    </div>
</div>

<div class="row gap-6">
    <!-- 左侧：基本信息 -->
    <div class="col-lg-4">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gray-50 p-4 border-b">
                <h3 class="text-lg font-semibold text-gray-800">基本信息</h3>
            </div>
            <div class="p-5">
                <dl class="space-y-4">
                    <div class="flex items-start">
                        <dt class="w-1/3 text-sm font-medium text-gray-500">品牌</dt>
                        <dd class="w-2/3 text-sm text-gray-900">{{ accessory.brand }}</dd>
                    </div>
                    <div class="flex items-start">
                        <dt class="w-1/3 text-sm font-medium text-gray-500">分类</dt>
                        <dd class="w-2/3 text-sm">
                            <a href="{% url 'encyclopedia:accessory_category_detail' accessory.category.pk %}" class="text-primary hover:underline">
                                {{ accessory.category.name }}
                            </a>
                        </dd>
                    </div>
                    {% if accessory.price_range %}
                    <div class="flex items-start">
                        <dt class="w-1/3 text-sm font-medium text-gray-500">价格区间</dt>
                        <dd class="w-2/3 text-sm text-success font-medium">{{ accessory.price_range }}</dd>
                    </div>
                    {% endif %}
                    {% if accessory.description %}
                    <div class="flex items-start">
                        <dt class="w-1/3 text-sm font-medium text-gray-500">简短描述</dt>
                        <dd class="w-2/3 text-sm text-gray-900">{{ accessory.description }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>
            
            <!-- 时间信息 -->
            <div class="bg-gray-50 p-4 border-t">
                <div class="text-xs text-gray-500 space-y-1">
                    <p>创建时间: {{ accessory.created_at|date:"Y年m月d日 H:i:s" }}</p>
                    {% if accessory.updated_at != accessory.created_at %}
                    <p>更新时间: {{ accessory.updated_at|date:"Y年m月d日 H:i:s" }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 兼容相机 -->
        {% if accessory.compatible_cameras.all %}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-6">
            <div class="bg-gray-50 p-4 border-b">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fa fa-camera text-primary mr-2"></i>兼容相机
                </h3>
            </div>
            <div class="p-5">
                <div class="space-y-3">
                    {% for camera in accessory.compatible_cameras.all %}
                    <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors">
                        <a href="{% url 'encyclopedia:camera_detail' camera.pk %}" class="text-gray-800 hover:text-primary">
                            <div class="flex items-center gap-3">
                                <i class="fa fa-camera-retro text-primary"></i>
                                <div>
                                    <h4 class="font-medium">{{ camera.title }}</h4>
                                    <p class="text-xs text-gray-500">{{ camera.brand }} - {{ camera.category.name }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- 右侧：详细介绍 -->
    <div class="col-lg-8">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gray-50 p-4 border-b">
                <h3 class="text-lg font-semibold text-gray-800">产品详情</h3>
            </div>
            <div class="p-6">
                <!-- 内容段落样式优化 -->
                <div class="prose max-w-none">
                    {{ accessory.content|linebreaks }}
                </div>
            </div>
        </div>
        
        <!-- 使用提示 -->
        {% if accessory.usage_tips %}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-6">
            <div class="bg-primary/10 p-4 border-b">
                <h3 class="text-lg font-semibold text-primary">
                    <i class="fa fa-lightbulb-o mr-2"></i>使用提示
                </h3>
            </div>
            <div class="p-5">
                <div class="text-gray-700 space-y-2">
                    {{ accessory.usage_tips|linebreaks }}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- 相关配件 -->
        {% if related_accessories %}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-6">
            <div class="bg-gray-50 p-4 border-b">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fa fa-link text-primary mr-2"></i>相关配件
                </h3>
            </div>
            <div class="p-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% for related in related_accessories %}
                    <div class="border border-gray-100 rounded-lg p-3 hover:shadow-md transition-shadow">
                        <a href="{% url 'encyclopedia:accessory_detail' related.id %}" class="text-gray-800 hover:text-primary">
                            <h4 class="font-medium flex items-center">
                                <i class="fa fa-puzzle-piece mr-2 text-primary"></i>
                                {{ related.title }}
                            </h4>
                            <p class="text-sm text-gray-500 mt-1">{{ related.description|truncatechars:50 }}</p>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- 删除确认弹窗 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-xl shadow-lg">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-gray-700">您确定要删除配件 "{{ accessory.title }}" 吗？此操作不可撤销。</p>
                {% if accessory.compatible_cameras.all %}
                <div class="mt-3 p-3 bg-warning/10 text-warning rounded-lg">
                    <p class="text-sm"><i class="fa fa-exclamation-triangle mr-2"></i>该配件与 {{ accessory.compatible_cameras.count }} 个相机有关联，删除后关联关系也将被移除。</p>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form method="post" action="{% url 'encyclopedia:accessory_delete' accessory.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 添加卡片加载动画
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.bg-white');
        cards.forEach((card, index) => {
            // 设置初始状态
            card.style.opacity = '0';
            card.style.transform = 'translateY(10px)';
            
            // 延迟显示，创造级联效果
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 150 * index);
        });
    });
</script>

<style>
    /* 自定义样式 */
    .prose p {
        margin-bottom: 1rem;
        line-height: 1.7;
    }
    
    .prose strong {
        font-weight: 600;
        color: #262626;
    }
    
    /* 添加渐入动画 */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 兼容相机列表项悬停效果 */
    .bg-gray-50.rounded-lg:hover {
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}